import React, { PureComponent } from 'react';
import { Icon,Modal,message } from 'antd';
import Link from 'umi/link';
import find from 'lodash/find'
import Debounce from 'lodash-decorators/debounce';
import styles from './index.less';
import Project from './Project'
import RightContent from './RightContent';
import { ellipsis, afterCloseModal, DescriptionItem } from '@/utils/utils';
import BuildModalTitle from '@/components/BuildModalTitle';
export default class GlobalHeader extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      background:'#000000',
      management_companies:sessionStorage.getItem('management_companies')?JSON.parse(sessionStorage.getItem('management_companies')):[],
      company_id:sessionStorage.getItem('company_id')?sessionStorage.getItem('company_id').toString():'',
      company_name:sessionStorage.getItem('company_name')
    };
  }
  componentDidMount() {
    const that = this;

  }
  changeColor = (value) => {
    console.log('value',value)
    this.setState({
      background : value.hex
    },function() {
      localStorage.setItem('background',value.hex)
    })
  }
  componentWillUnmount() {
    this.triggerResizeEvent.cancel();
  }
  /* eslint-disable*/
  @Debounce(600)
  triggerResizeEvent() {
    // eslint-disable-line
    const event = document.createEvent('HTMLEvents');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
  }
  toggle = () => {
    const { collapsed, onCollapse } = this.props;
    onCollapse(!collapsed);
    this.triggerResizeEvent();
  };
  resetBackground=()=>{
    this.setState({
      background:''
    },function() {
      localStorage.setItem('background','')
    })
  }
  getContrastYIQ=(hexcolor)=>{
    if(!hexcolor)return project
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(5,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ?project : project2;
  }
  getContrastYIQ2=(hexcolor)=>{
    if(!hexcolor)return ty_logo
    var r = parseInt(hexcolor.substr(1,2),16);
    var g = parseInt(hexcolor.substr(3,2),16);
    var b = parseInt(hexcolor.substr(5,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ?ty_logo : project2;
  }
  render() {
    console.log('this.state.management_companies',this.state.management_companies)
    const { collapsed, isMobile, logo } = this.props;
    let company_name=sessionStorage.getItem('company_name');
    return (
      <div className={styles.header} style={{background:this.state.background?this.state.background:''}}>
        <Project></Project>
        <RightContent {...this.props} changeColor={this.changeColor} resetBackground={this.resetBackground} background={this.state.background}/>
        <Modal
          title={<BuildModalTitle visible={this.state.changeModal} modalClass="changeModal"
                                  title={`切换公司`}/>}
          visible={this.state.changeModal}
          centered
          onOk={this.handleEdit}
          afterClose={() => {
            afterCloseModal(); // destroyOnClose需要
          }}
          destroyOnClose
          width={800}
          className="changeModal"
          onCancel={() => {
            this.setState({ changeModal: false });
          }}
          footer={null}
        >
          <div style={{display:'flex',justifyContent: 'space-between',  fontSize:'20px',textAlign:'center',  alignItems: 'center',flexWrap:"wrap"}}>
            {
              [{name:'天源水务',id:''},...this.state.management_companies].map((item,index)=>{
                return <div key={index}  onClick={()=>{
                  if(this.state.company_id===item.id){
                    return false
                  }
                  this.setState({
                    company_id:item.id,
                    company_name:item.name,
                  },function(){
                    sessionStorage.setItem('company_id',item.id)
                    sessionStorage.setItem('company_name',item.name)
                    message.success('切换公司成功，页面重启中...')
                    let retainUrl=['dashboard','home','meter_analysis','meters','meter_error','vendor_meter','revenue','price','owner','payment','billings','mechanical','staff_report',
                    'daily_payment_reports','level_annual_billings2','level_user_billings','price_nature_reports','replace_account_logs','zero_abnormal','meter_abnormal','old_meter_logs'
                      ,'staffs','roles']
                    setTimeout(function(){
                      // window.location = '/dashboard'
                      if(find(retainUrl,function (item){
                        return `/${item}`===window.location.pathname
                      })){
                        window.location =window.location.pathname
                      }else{
                        window.location = '/dashboard'

                      }

                    },1500)
                  })
                }}  style={{width:!item.id?'100%':'49%',padding:'20px',marginBottom:'20px',background:this.state.company_id==item.id?'linear-gradient(45deg, rgba(0, 200, 255, 0.4) 0%, rgba(132, 43, 171, 0.4) 100%)':'#ccc',
                  color:this.state.company_id==item.id?'#fff':'#000',border:'1px solid #000',borderRadius:'10px',cursor:'pointer'}}>
                  {item.name}
                </div>
              })
            }
          </div>
        </Modal>
      </div>
    );
  }
}
